<template>
    <el-dialog
            :title="title"
            :visible.sync="dialogFormVisible"
            width="500px"
            @close="close"
            top="100px"
    >
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="角色名称" prop="name">
                <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="菜单选择" :required="true" style="text-align:left">
                <!--<el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>-->
                <div class="treeborder">
                    <el-tree
                            class="filter-tree"
                            show-checkbox
                            node-key="id"
                            :data="menuDatas"
                            :props="defaultProps"
                            default-expand-all
                            :filter-node-method="filterNode"
                            ref="tree"
                    ></el-tree>
                </div>
            </el-form-item>
            <el-form-item label="描述" prop="description">
                <el-input
                        v-model.trim="form.description"
                        autocomplete="off"
                        type="textarea"
                        :rows="5"
                ></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="close">取 消</el-button>
            <el-button type="primary" @click="save" :loading="loading" :disabled="disabled">
                {{ loading ? '确定中 ...' : '确定' }}
            </el-button>
        </div>
    </el-dialog>
</template>

<script>
    import {doRoleEdit, getRoleById} from '@/api/role'
    import {getMenuList} from '@/api/menu'

    export default {
        name: 'RoleManagementEdit',
        data() {
            return {
                // filterText: '',
                menuDatas: [],
                checkstrictly: true,
                defaultProps: {
                    children: 'children',
                    name: 'name',
                },
                form: {
                    id: '',
                    name: '',
                    description: '',
                    menuIdList: [],
                },
                rules: {
                    name: [{required: true, trigger: 'blur', message: '请输入角色名称'},],
                    // menuIdList: [{required: true, trigger: 'change', message: '请选择菜单'},],
                },
                title: '',
                dialogFormVisible: false,
                loading: false,
                disabled: false,
            }
        },
        created() {
        },
        watch: {
            filterText(val) {
                this.$refs.tree.filter(val)
            },
        },
        methods: {
            getMenuDatas() {
                getMenuList().then((res) => {
                    this.menuDatas = res.data
                    console.log(this.menuDatas)
                })
            },
            async fetchData() {
                const {data} = await getRoleById(this.form.id)
                this.form = data
                this.$refs.tree.setCheckedKeys(this.form.menuIdList)
            },
            showEdit(row) {
                this.getMenuDatas()
                if (!row) {
                    this.title = '添加'
                    if(this.$refs.tree){
                        this.$refs.tree.setCheckedKeys([]);//清空tree
                    }
                } else {
                    this.title = '编辑'
                    this.form.id = row;
                    this.fetchData()
                }
                this.dialogFormVisible = true
            },
            filterNode(value, data) {
                if (!value) return true
                return data.label.indexOf(value) !== -1
            },
            close() {
                this.$refs['form'].resetFields()
                this.form = this.$options.data().form
                this.dialogFormVisible = false
            },
            save() {
                if (this.loading) {
                    return
                }
            

                // console.log("tree:")
                // console.log(this.$refs.tree)
                // console.log(this.$refs.tree.getCheckedNodes())
                // console.log(this.$refs.tree.getCheckedKeys())
                // console.log(this.$refs.tree.getHalfCheckedKeys())

                // console.log("this.form:")
                // console.log(this.form)
                this.form.menuIdList = this.$refs.tree
                    .getCheckedKeys()
                    .concat(this.$refs.tree.getHalfCheckedKeys())
                if (this.form.menuIdList == null || this.form.menuIdList == "" || this.form.menuIdList == undefined || this.form.menuIdList.length == 0) {
                    this.$baseMessage('请选择菜单', 'error')
                    return;
                }

                this.$refs['form'].validate(async (valid) => {
                    if (valid) {
                        this.loading = true
                        this.disabled = true
                        this.timer = setTimeout(() => {
                            setTimeout(() => {
                                this.loading = false
                                this.disabled = false
                            }, 400)

                            doRoleEdit(this.form).then((res) => {
                                if (res.code == 0) {
                                    this.$baseMessage(res.msg, 'success')
                                    this.$emit('fetch-data');
                                    this.close()
                                } else {
                                    this.$baseMessage('失败', 'error')
                                }
                            })
                        }, 2000)
                    } else {
                        return false
                    }
                })
            },
        },
    }
</script>
<style lang="scss" scoped>
    .filter-tree {
        margin-top: 0px;
    }

    .treeborder {
        padding: 20px;
        height: 300px;
        margin-top: 20px;
        border: 1px solid #dcdfe6;
        border-radius: 2.5px;
        overflow-y: auto;
    }
</style>
